Question

webpack先搭建环境再写代码吗

Answer 1

工具
常见模块化开发规范：CMD（seaJS） AMD（requireJS...）
一、webpack环境搭建1.webpack安装
首先需要安装nodeJS，先在nodeJS官网下载，进行NodeJS安装
下载地址 https://nodejs.org/en/download/
下载完毕后，进行安装，一切都以默认的选择即可
2.npm安装
安装完毕后，打开cmd工具，输入命令
npm install --save mocha

等待安装完毕
3.webpack安装
cmd工具中，输入命令
npm install webpack -g

执行命令安装webpack
到此webpack安装完毕，可以使用
webpack -h

来查看版本号

到此，webpack安装完成
二、webpack打包
1. 打开cmd工具，进入你的开发文件夹，其中此文件夹必须包含webpack.config.js文件，config配置参考如下

var webpack = require("webpack")
module.exports = {
entry: {
"mcDemoMain": "./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中，如require('./common/Enum')，延迟加载兄前隐的文件则不会，如require("bundle?lazy&name=demo!./demo/demo1")
},
output: {
path: "../../dist/demo/1.0",//设置打包羡厅后的js的输出位置
filename: "[name].js",//和入口文件的名字相同
chunkFilename: "[name].young.js",//值模块里需要单独打包的文件 require.ensure
//path: path.join(__dirname, 'static/js/app/dist'), //设置打包后的js的输出位置
/悔陵/filename: "[name].[hash].js", //和入口文件的名字相同
publicPath: "[sDomain]static/dist/demo/1.0/" //浏览器会从这个目录开始查找模块
},
module: {
loaders: [
//{ test: /\.css$/, loader: "style!css" },
//{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: 'es2015' } },
]
},
plugins: [
new webpack.BannerPlugin('文件顶部注释说明'),
// new webpack.IgnorePlugin(/\.\/AsnyModuleA.js$/),//排除不想打包进去的插件
//new webpack.ProvidePlugin({ //这是把jquery挂到全局上，不用每个模块都去require
// "AsnyModuleA": '../../../dist/demo/AsnyModuleA.js',
//}),
//new webpack.optimize.CommonsChunkPlugin('common.js') //有多个入口文件的话提取公共部分，利用浏览器缓存 然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来:
]
, resolve: {
//modulesDirectories: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',//["C:\Users\Administrator\AppData\Roaming\npm\node_modules"],
//root: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',
alias: {
//jquery: path.join(__dirname, 'dev/jquery/jquery.js'),
//AsnyModuleA: "../../../dist/demo/start/commom/AsnyModuleA.js", //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')
//'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名
}
},
//externals: {
// 'AsnyModuleA': 'AsnyModuleA'
//}
}

2.cmd进入开发目录后，输入
webpack

就可以进行打包了，如果显示以下则表示成功