webpack简单入门

 

 

一.简单配置

• 通过npm装wbepack到项目中 

cnpm install [email protected] --save-dev；    //开发环境下
cnpm install [email protected] -g //全局安装到本地

• 建立入口文件main.js,配置webpack.config.js文件

//我们编写的js文件中通过module.exports=*导出模块，然后比需在main.js中通过reuqire('*')引入模块
//主要遵循CommonJS规范
const path=require('path')；  //nodejs的path模块
module.exports={
  entry:'./main.js',  //入口文件
  output:{
    filename:"bundle.js",  //出口文件 即所有模块通过webpack打包，最终在index.html中引入该文件即可
    path:path.resolve(__dirname,"./dist")  //出口文件路径  最终会在目录下生成dist目录
  },
  ...... //接以下代码
}；

•  通过运行webpack --config webpack.config.js打包

//可在package.json中添加脚本 "start":"webpack --config webpack.config.js"
//执行npm run start即可进行打包

二.处理css文件

•  1.新建你的css文件，比如在你当前目录下有less.css文件
• 2.通过webpack的loader来加载转化我们的css文件

//less.css文件需通过require(./less.css)引入到main.js中
//配置webpack --config webpack.config.js，然后打包就可显示
   module:{
        rules:[
            {
                test:/\.css$/,  //用正则表达式去匹配要用该loader转化的css文件
                use:[
                    'style-loader',
                    {
                        loader:"css-loader",
                        options:{
                            minimize:true   //minimize告诉css-loader开启压缩css
                        }
                    }
                ]
            }
        ]
    }

•  3.使用plugin插件扩展可以单独分离出css文件，避免js代码和css代码混合

const path=require('path');
const extractTextPlugin=require('extract-text-webpack-plugin');
module.exports={
    entry:'./main.js', //入口文件
    output:{
        filename:"bundle.js",  //出口文件
        path:path.resolve(__dirname,"./dist")  //所在目录
    },
    module:{
        rules:[
            {
                //用正则表达式去匹配要用该loader转化的css文件
                //loader的执行顺序从后到前  minimize告诉css-loader开启压缩css
                test:/\.css$/,
                loaders:extractTextPlugin.extract({
                    use:['css-loader'], 
                })
            }
        ]
    },
    plugins:[
        new extractTextPlugin({
            //从js中提取出来的css文件名称
            filename:`[name]_[contenthash:8].css`
        }),
    ]
}

三.使用DevServer配置本地服务

• 1.安装DevServer

npm install webpack-dev-server --save-dev

• 2.在webpack.config.js中配置

 devServer: {
        host: "0.0.0.0", //本机的所有IP
        port: 9999 //端口号
    }

• 3.在package.json中配置和脚本 'dev':'webpack-dev-server --config webpack.config.js'  

npm run dev

 注意：

webpack目前最新版本为[email protected],

webpack-dev-server最新版本为[email protected]

在使用[email protected]的时候请使用[email protected]

在使用[email protected]的时候请使用[email protected]