比Gulp还要牛的Webpack

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

如果还是有还是不太清楚的地方可以给我留言哦

比Gulp还要牛的Webpack

推荐阅读更多精彩内容