webpack开发环境配置

需要的依赖

1. Node.js
2. webpack

      npm install webpack webpack-cli -g    //全局安装
      npm install webpack webpack-cli -D   //本地(当前目录)安装
   

3. 各种loader

      //根据需要安装loader
      npm i css-loader style-loader less-loader html-loader url-loader file-loader less -D
   

4. html-webpack-plugin 插件

      npm i html-webpack-plugin -D
   

5. dev-server

      npm i webpack-dev-server -g
   

webpack开发环境配置

1. 创建文件
   

2. 修改配置文件(webpack.config.js)

   /*
     开发环境配置：能让代码运行
       运行项目指令：
         webpack 会将打包结果输出出去
         npx webpack-dev-server 只会在内存中编译打包，没有输出
   */
   
   const { resolve } = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './src/js/index.js',
     output: {
       filename: 'js/built.js',
       path: resolve(__dirname, 'build')
     },
     module: {
       rules: [
         // loader的配置
         {
           // 处理less资源
           test: /.less$/,
           use: ['style-loader', 'css-loader', 'less-loader']
         },
         {
           // 处理css资源
           test: /.css$/,
           use: ['style-loader', 'css-loader']
         },
         {
           // 处理图片资源
           test: /.(jpg|png|gif)$/,
           loader: 'url-loader',
           options: {
             limit: 8 * 1024,
             name: '[hash:10].[ext]',
             // 关闭es6模块化
             esModule: false,
             outputPath: 'imgs'
           }
         },
         {
           // 处理html中img资源
           test: /.html$/,
           loader: 'html-loader'
         },
         {
           // 处理其他资源
           exclude: /.(html|js|css|less|jpg|png|gif)/,
           loader: 'file-loader',
           options: {
             name: '[hash:10].[ext]',
             outputPath: 'media'
           }
         }
       ]
     },
     plugins: [
       // plugins的配置
       new HtmlWebpackPlugin({
         template: './src/index.html'
       })
     ],
     mode: 'development',
     devServer: {
       contentBase: resolve(__dirname, 'build'),
       compress: true,
       port: 3000,
       open: true
     }
   };
   
   

3. 运行指令: npx webpack-dev-server

4. 打包文件：webpack