webpack 初始化配置及webpack-dev-server

初始化

npm init -y

安装webpack

webpack: cnpm i --save webpack webpack-cli

• --save 开发环境
• --save-dev 生产环境

webpack 4.0 把webpack和webpack-cli分离了，需要单独安装

安装webpack-dev-server

cnpm i --save webpack-dev-server

安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
用法和npm一样的，cnpm是国内的（推荐）。

webpack.config.js配置

const path = require('path')
module.exports = {
//入口文件
  entry: "./app/index.js",
//出口文件
  output:{
      filename:'index.js',
      path:path.resolve(__dirname,'dist'),
      publicPath:'temp/'
  },
// webpack 4.0 需要加mode
  mode: 'development',
// 配置webpack-dev-server
  devServer: {
//这里要注意了是‘./’
    contentBase: './',
    host: localhost,
    compress: true,
//端口号
    port: 4040
  },
  module: {
    rules: [
      {
        test: /\.js$/,
  //不去匹配改文件
        exclude:/node_modules/,
        loader: 'babel-loader',
        options: {
          presets:['es2015','react']
        }
      },
       {
           // test 表示测试什么文件类型
           test:/\.css$/,
           // 使用 'style-loader','css-loader'
           use:ExtractTextPlugin.extract({
               fallback:'style-loader', // 回滚
               use:'css-loader',
               publicPath:'../' //解决css背景图的路径问题
           })
       },
       {
           test:/\.less$/,
           use:['style-loader','css-loader','less-loader'] // 编译顺序从右往左
       },
       {
           test:/\.(png|jpg|gif)$/,
           use:[{
               loader:'url-loader',
               options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                   limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                   outputPath:'images' //定义输出的图片文件夹
               }
           }]
        }
    ]
  }
}

然后修改我们开始初始化的文件

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

打包:npm run build
开启本地服务器：npm run dev