一、webpack配置文件,文件名为:webpack.config.js 放置到项目根目录下即可
1、在上面项目中新建:./css/index.css文件,内容如下:
一、index.js入口文件如下
六、webpack-dev-server --hot --inline,webpack热加载自动刷新命令
第一步:安装 npm install webpack-dev-server -g
第二步:写入到package.json依赖 npm install webpack-dev-server --save-dev
第四步:修改index.xml中引入bundle.js的路径。
第五步:运行如下命令,webpack-dev-server --hot --inline 实现自动刷新。默认端口8080;
浏览器输入 http://localhost:8080/index.html 然后修改css就能立即看到反应在网页上了。
文件 结构如下:
var webpack = require('webpack');
module.exports = {
entry:"./js/index.js",
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename:"bundle.js"
},
plugins:[ //UglifyJsPlugin插件中 warnings:false 打包时可以消除warings报警
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
],
module:{
loaders:[
{ test:/\.css$/,
loaders: ['style-loader', 'css-loader']
}]
},
resolve:{
extensions:['.js','.css'] //自动补全识别后缀
}
}
二、单文件输入,输出配置
1、在项目根目录下新建js文件夹,创建有两个文件common.js,index.js。内容分别如下:
./js/common.js
module.exports = "hello";
./js/index.js
var str = require("./common.js");
console.log(str);
2、webpack.config.js配置文件中entry,output配置如下:
var path = require('path');
module.exports = {
entry:"./js/index.js", //entry代表入口文件
output:{
path: path.resolve(__dirname, './dist'), //出口文件路径,打包js放在dist目录下
publicPath: '/dist/',
filename:"bundle.js" //输出文件名
}
}
三、多入口,多输出文件配置
var path = require('path');
module.exports = {
entry:{
index:"./js/index.js",
main:"./js/main.js"
},
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename:"[name].bundle.js" //[name] 是一个占位符,类似函数形式参数。实际参数是index与main。
//dist目录中生成index.bundle.js和main.bundle.js
}
}
四、在module模块中,配置模块加载器,这里以配置CSS文件模块加载器为例子。1、在上面项目中新建:./css/index.css文件,内容如下:
body{background:blue;}
2、修改上列的,index.js入口文件如下:
var str = require("./common.js");
alert(str);
require("../css/index.css"); //这里不需要 style-loader!css-loader!,我们把加载器配置到webpack.config.js文件里面。
3、修改webpack.config配置文件
module.exports = {
entry:"./js/index.js",
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename:"bundle.js"
},
module:{
loaders:[
{ test:/\.css$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
}
}
五、resolve自动补全,属性extensions数组中配置的文件后缀:一、index.js入口文件如下
require("../css/index");
var str = require("./common");
alert(str);
二、在配置文件添加 resolve 字段.
module.exports = {
entry:"./js/index.js",
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename:"bundle.js"
},
module:{
loaders:[
{ test:/\.css$/,
loaders: ['style-loader', 'css-loader']
}]
},
resolve:{
extensions:['.js','.css'] //自动补全识别后缀
}
}
六、webpack-dev-server --hot --inline,webpack热加载自动刷新命令
第一步:安装 npm install webpack-dev-server -g
第二步:写入到package.json依赖 npm install webpack-dev-server --save-dev
第三步:修改webpack配置文件
var webpack = require('webpack');
module.exports = {
entry:"./js/index.js",
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename:"bundle.js"
},
plugins:[ //UglifyJsPlugin插件中 warnings:false 打包时可以消除warings报警
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
],
module:{
loaders:[
{ test:/\.css$/,
loaders: ['style-loader', 'css-loader']
}]
},
resolve:{
extensions:['.js','.css'] //自动补全识别后缀
}
}
第四步:修改index.xml中引入bundle.js的路径。
<script type="text/javascript" src="../dist/bundle.js"></script>
第五步:运行如下命令,webpack-dev-server --hot --inline 实现自动刷新。默认端口8080;
浏览器输入 http://localhost:8080/index.html 然后修改css就能立即看到反应在网页上了。
七、修改package.json ,创建快捷键命令
package.json中,scripts字段,可以把一个复杂的命令起一个简单的名字,或者就是快捷键。
输入命令npm run start 代替上面 输入的命令,webpack-dev-server --hot --inline 来实现自动刷新。
npm run build 代替命令webpack -p 实现打包压缩
--progress 打印打包日志
--colors 带颜色的日志