----------------------简单打包流程-----------------------
1. 1.安装webpack
cnpm install webpack webpack-cli -g;
新建一个src文件,在其目录下新建一个main.js入口文件(如果都已经生成存在则不用管)
2. 初始化项目包
npm init -y 生成package.json
3. 本地安装webpack依赖
cnpm install webpack webpack-cli --save-dev
4. webpack打包
webpack ./src/main.js -o ./dist/bundle.js --modedevelopment //开发模式
webpack ./src/main.js -o ./dist/bundle.js --mode
production //生产模式

---------------------配置文件打包流程---------------------
前提你已经进行以上1,2,3步骤,再新建webpack.config.js文件,并配置它

//以下配置完毕,执行webpack命令开始打包,前提记得cnpm install 
const path = require('path');//引入路径模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = {
     //入口文件
     entry:'./src/main.js',
     //输出文件
     output:{
          filename: 'bundle.js', //输出名称,使用到了文件cnpm install file-loader --save-dev
          path: path.resolve(__dirname, 'dist'),  //输出的路径
           },
     mode: 'production',  //生产模式
     module: {
         rules: [
                   { test: /\.css$/, use: ['style-loader','css-loader' ]},//匹配css文件,将css转换为js
                    //安装依赖cnpm install style-loader  css-loader  --save-dev
                    { test: /\.(jpg|png|gif)$/, 
                        use: 'url-loader',
                        options:{limit8*1024,esMoudle:flase,name:'[hash:10].[ext]'} 
                     },
                      //匹配图片文件,图片小于8k,进行base 64处理,取图片hash前10位
                      //安装依赖cnpm install url-loader  --save-dev
                    { test:/\.html$/,loader:'html-loader'}
                     //安装依赖cnpm install html-loader  --save-dev
                 ], 
           }, 
     plugins: [
           new webpack.ProgressPlugin(),
           new HtmlWebpackPlugin({ template: './src/index.html' }),//通过cnpm install html-webpack-plugin --save -dev安装
         ],  
     devServer:{
          //项目构建路径
           contentBase:path: path.resolve(__dirname, 'dist'),
          //启动gzip压缩
          compress:true,
          //端口
          port:3000,
          //自动打开浏览器
          open:true,
       }   
       //安装cnpm install webpack-dev-server -g 进行启动,如果执行错误,查看package.json文件安装依赖,cnpm install                      
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐