entry output

entry output

webpack配置
webpack.config.js是webpack的默认配置文件

//webpack.config.js
module.exports = { 
    // 在4.0之后默认入口路径为src 出口路径默认为dist
   context:  path.join(_dirname, './src/index.js') //入口文件的路径前缀，绝对路径
   entry: './src/index.js' //入口文件支持字符串、数组、对象、函数
   entry: ['babel-polyfill'，'./src/index.js'] // 入口文件在最后 前面是模块
   // 函数动态路径
   entry: () => new Promise((resolve) => {
   setTimeout(() => {
        resolve('./src/indexi.js')
    }, 1000)
})
  // 提取文件 需要配合插件 4.0后optimization.splitChunks
   entry: {
      app: './src/index.js'
      vendor: ['react','react-dom','react-router']
}
   // 出口文件
   output: { 
      fileName: 'bundle.js' ,  // name hash chunkhash id query
      path: path.join(_dirname, 'assets'),  //指定资源的输出路径 绝对路径
      publicPath: '/dist/' //出口文件的引用路径
}
   mode: development //环境变量
}

注：
1、本页html路径拼接
2、host /开头 以当前html的根路径拼接
3、cdn相关 以协议头和相对协议开头 路径拼接
——webpack-dev-server中也有publicPath字段的定义，但是这里指的是静态资源服务器路径，一般我们将两个publicPath设置在/dist/中，防止找不到资源。

webpack-dev-server

便捷的本地开发工具webpack-dev-server 会将打包后的js文件和生成的html暂存在服务器上，会对页面及时刷新而不用每次编辑后都进行手动打包。

// 安装webpack-dev-server
npm install webpack-dev-server
// 配置package.json
'scripts': {'build': 'webpack-dev-server'}
// 配置webpack.config.js
mode: 'develpoment',
devServer: {publicPath: '/dist'}

---

下一节loader plugin 引入：https://www.jianshu.com/p/576bcbc086bf