对webpack从零配置

一.新建配置文件，文件名一般为webpack.config.js；

二.配置文件目录，一般为根目录，一般会放在./build文件夹下

三.配置文件格式一般为module.exports={},

四.结构如下：

module.exports = {
  entry: "...",
  output: {... },
  module: {
    rules: [
      {...},
      {...},
    ],
  },
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
    alias: {...},
  },
  performance: {...  },
  devtool: "source-map",
  context: __dirname,
  target: "web",
  externals: ["react", /^@angular\//],
  stats: "errors-only",
  devServer: { ...  },
  plugins: [   ...  ],
}

1.入口文件和上下文

module.exports = {
    // 上下文是查找入口文件的基本目录，是一个绝对值，所以要用到path.resolve
    // 如果不设，默认为当前目录
    // 与命令行中的webpack --context是一样的
    // 最后入口文件是 context+entry
    //可以写成./today/wang[前面➕./],不能写成/today/wang,如果../表示在当前目录再往上一层
    // context 除了这里的入口文件用到，loader，。plugin都会要用到这个值
  context:path.resolve(__dirname,'./today/wang'),
    // entry可以为字符串|对象|数组三种形式
    // 如果底层有封装那么后面的js可以省略
    // 字符串
     entry:“./app/entry”,
    // 数组
      entry:["./homne.js","./about.js",]
    //对象
    entry:{
        home：‘./home.js’,
        about:'./about.js',
        contact:'./contact.js'
}
}

2.输出

module.exports={     
 output:{

 //最后生成的打包文件所在的目录，是一个绝对值，如果不指定，表示当前目录

           //如果文件夹不存在，会自动创建
           path：path.resolve(__dirname,'../dist/'),
           //filename中可以使用[name],[id],[hash]，[chunkhash][query]五种变量
            filename: ‘zhou.js'//单个文件
            filename:‘[name]wang.js’；//多个文件
            filename:‘[id]wang.js’
            filename: ‘[name].[hash].bundle.js’
            filename:'[chunkhash].yes.js'//20位hash值
            hashDigestLength:8//指定最后chunkhash和、hash生成字符串的长度，默认是20个字符
    }
}

3。模块 modules
 module:{
rules:[
{

test:/\.vue$/,
loader:'vue-loader'
options:vueLoaderConfig
}
]
}
4.resolve

resolve: {
    extensions: ['.js', '.vue', '.json'], //扩展名为.js,.vue,.json的可以忽略，如 import App from './app'，先在当前目录中找app.js，没有再找app.vue，没找到，再找.json，如果还没找到，报错
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // 别名，这是一个正则的写法，表示以vue结尾的，如import Vue from 'vue' 表示 import Vue from 'vue/dist/vue.esm.js'
      '@': path.resolve('src'),// 这也是为懒人服务的,import HelloWorld from '@/components/HelloWorld'这里的@其实就是代表src这个目录
      '#': path.resolve('src/ui/components') import Table from '#/table'
    }
  },

5.开发服务器

evServer: {
     //progress只在命令行用，不在配置文件中配
      contentBase: path.resolve(__dirname, "../dist/"), //网站的根目录为 根目录/dist，如果没有指定，使用process.cwd()函数取当前工作目录，工作目录>npm run dev
      port: 8080, //端口改为9000
      open:true, // 自动打开浏览器
      //index:'front.html', // 与HtmlWebpackPlugin中配置filename一样
      inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
      hot:false,
      publicPath: '/static456/',它与output.publicPath的值应该是一样的，值为上面contentBase目录的子目录，是放js,css,图片等资源的文件夹，记得打包时，将图片等拷贝或打包到该文件下
      compress:true //压缩
    }