webpack
api:需要在服务器环境下,在你创建的文件夹根目录中进行如下操作
1、在git bash上输入:npm install webpack -g
2、在git bash上输入:npm install webpack
3、在git bash上输入:npm init
之后会有package.json文件和node_modules文件
4、在根目录创建index.html
5、书写webpack.config.js文件
module.exports = {
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
}
}
main.js是需要放在根目录下面的,是写好了js需要压缩打包的js文件
6、执行webpack 根目录下会多出一个bundle.js
7、在index.html中引入bundle.js
8、页面展示成功
9、在git bash上输入:webpack --watch 可以监控目录下的文件变化并实时重新构建
10、上面只是实时构建后我们如何把结果通知给浏览器页面,让HTML页面上的bundle.js内容保持更新
11、在git bash上输入:npm install webpack-dev-server -g
12、在git bash上输入:webpack-dev-server
13、在git bash上输入:webpack-dev-server --inline
14、在http://localhost:8080/index.html中就可以实时更新修改的内容了
15、如果想使用第三方库需要借助npm,比如安装一个jQuery
16、npm install jquery
17、如果想使用ES6引入某个es6模块 比如:import $ from 'whatever'
18、目前浏览器只支持原生的仅支持CommonJS的写法
19、但是我们可以通过babel-loader来加载es6模块
20、在git bash上输入:npm install babel-loader babel-core babel-preset-es2015 --save-dev
21、在webpack.config.js文件中在module.exports值中添加module
module.exports = {
entry:{
app:['./main.js']
},
output:{
filename:'bundle.js'
},
module:{
loaders:[{
test:/\.js$/,
loaders:['babel?presets[]=es2015'],
exclude:/node_modules/
}]
}
}
22、这样我们就可以在js文件中使用ES6语法,babel-loader负责翻译
23、我们也可以不用link标签引入CSS,而是通过webpack的style-loader和css-loader,
前者将css文件以<style></style>标签插入<head></head>头部中,后者负责解读、加载css文件
24、在git bash上输入:npm install style-loader css-loader --save-dev
25、配置webpack.config.js文件
{
//...
module:{
loaders:[{
{test:/\.css$/,loaders:['style','css']} //如果有上面的文件直接以json的方式添加在loaders的数组中
}]
}
}
26、在main.js文件中引入css
27、在main.js文件编写添加 --> import'./style/.css' //css路径
28、autoprefixer 据浏览器版本自动处理浏览器前缀
29、在git bash上输入:npm install autoprefixer-loader --save-dev
30、配置webpack.config.js文件
loaders:[{
test:/\.css$/,
loader:'style'!css!autoprefixer?{browsers:["last 2 version","> 1%"]}
}]
31、重新启动webpack-dev-server
the end
如果还是有还是不太清楚的地方可以给我留言哦
