webpack构建项目步骤

1. npm init -y

2. npm install webpack --save-dev

3. 配置package.json

    "scripts": {
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js"
    }
   

   就是npm可以执行的方法,npm run dev/start/build,内部就执行了webpack的编译

   配置热更新
   npm install webpack webpack-dev-server --save-dev

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start":"webpack-dev-server --env development",//wds就是热更新的配置
        "build":"webpack --env production"
      },//start和build后面的是环境变量,env development是一个开发的环境,env production就是真实的环境,也就是放在服务器上面的打包后的文件
   

4. 配置css的解析
   安装解析css所需有的依赖
   npm install --save-dev style-loader css-loader
   在webpack.config.js里面配置好module文件

    module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[
                        "style-loader",
                        "css-loader"
                    ]
                }
            ]
        }
   

   然后要在index.js里面import"./style.css"就是需要的文件

5. 配置图片的解析
   一样是首先安装解析图片的依赖
   npm install --save-dev file-loader

webpack.config.js

module.exports ={
    devServer:{
        host:process.env.HOST,//设置访问的ip地址,process.env.HOST就是本地的地址
        port:8080  //设置访问的端口号
    },
    entry:{
        app: PATHS.app
    },
    output:{
        path:PATHS.build,
        filename:"[name].js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"Webpack demo"
        })
    ],
    
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)/,
                use:[
                    "file-loader"
                ]
            }
        ]
    }
}

一个webpack.config.js文件里面有很多配置的选项,现在一个个来解释一下有什么用

1. module
   这些选项决定了如何处理项目中的不同类型的模块。
   加载css:
   要先npm install --save-dev style-loader css-loader

        {
          test: /\.css$/,  // 利用正则获取所有css结尾的文件
          use: [
            'style-loader', //使用安装的组件解析
            'css-loader'  
          ]
        }
   

加载图片:
要先npm install --save-dev file-loader

            {
              test: /\.(png|svg|jpg|gif)$/,
              use: [
                'file-loader'
              ]
            }

加载字体文件:
直接利用 file-loader去加载就可以了

          test: /\.(woff|woff2|eot|ttf|otf)$/,
              use: [
                'file-loader'
              ]
            }

2.plugins
使用的一些插件

HtmlWebpackPlugin:
作用是自动把解析的文件添加到index里面

        plugins: [
          new HtmlWebpackPlugin({
            title: 'Output Management'
          })
        ]

clean-webpack-plugin:
作用是每次run都会清理dist里面的东西

    plugins: [
        new CleanWebpackPlugin(['dist'])
    ]

resolve里面的alias就是一些别名的配置,就是设置一些绝对路径,然后以后要用到common或者components路径的文件的时候,不需要写相对路径了,变成了一个绝对路径了

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src'),
          'common': resolve("src/common"),
          "components":resolve("src/components")
        }
      }

一些插件

babel-runtime 对es6语法做一些转译
fastclick 解决移动端点击延迟问题
babel-polyfill 对es6的一些例如promise作一些转译,就可以使用es6的api

webapack遇到的一些坑和小知识点

1. 使用less并且要直接import全局css的话,要安装less,less-loader,如果还是不行安装一个node-less,在组件中要使用less的话,加一个lang='less'就可以了

2. 要映射后台服务器,修改proxyTable

   proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/isearch': {
   target: 'http://112.74.111.78:8090/isearch/',
   changeOrigin: true,
   pathRewrite: {
   '^/isearch': ''
   }
   }
   }