[webpack]初识webpack(webpack基本配置与本

构建webpack的环境

1. cnpm i webpack -g

2. cnpm i webpack --save-dev

3. cnpm i webpack-cli -g

4. cnpm i webpack-cli --save-dev

5. cnpm install webpack-dev-server -g

6. 运行webpack-dev-server --progress --colors

初识webpack

1.特点

• 代码拆分
  webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
• Loader
  loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。webpack本身是只能处理js模块。
• 智能解析
  Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
• 丰富的插件

2. 一个简单的例子

新建webpack.config.js
由以下四部分组成: 入口、出口、加载器、插件

module.exports = {
    entry: {
        bundle1:'./main1.js',
        bundle2:'./main2.js'
    }, 
    output:{  
        path:__dirname+'/',
        filename:''[name].js''
    },
    module:{
        rules:[{
            test:/\.css$/,
            loader:['style-loader','css-loader']
        },
        {
            test:/\.(png|jpg)$/,loader:'url-loader',options:{limit:'1024'}
        }]
    },
    plugins:[
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false
            }
        })
    ]
}

entry:string/array/object

• 案例1 entry:'./path/to/my/entry/file.js'
• 案例2 entry:['./entry1','./entry2'] 创建多个路口
• 案例3 entry:{app:'./src/app.js',vendors: './src/vendors.js'} webpack从app.js和vendors.js开始创建依赖图表。这些图表是彼此完全分离、互相独立的。

output

启动本地服务

1. cnpm i webpack-dev-server --save-dev
2. webpack.config.js

devServer:{
    contentBase:'./',
    host:"localhost", // ipconfig
    compress: true,//是否压缩
    port:2000 //暴露的端口号
}

3. 这样就可以使用webpack-dev-server开启本地服务了
4. package.jsonscripts:{"server": "webpack-dev-server --open"}就可以使用npm run server 启动本地服务
5. webpack.config.js配置publicPath: "temp/",页面<script src="./temp/main.js"></script>,就可以使用热更新了
   demos