webpack4.x 基础配置

一.webpack4.x 配置篇

webpack 是一个打包工具，进行代码分割，模块通过loader处理各种文件，模块打包器，按需加载，使初始化加载时间更短，适合大型项目。模块热更新 1.先初始化package.json ，执行 npm init 2.安装对应的模块加载，css-loader,vue-loader等 3.新建文件夹，放文件 4.新建app.vue 组件 5.新建入口文件，index.js 6.新建webpack.config.js 

const path = require(''path);
const isDev = process.env.NODEENV === 'development';
const config = {
  target:'web',
  enrty:path.join(dirname, 'src/index.js'),
  output: {
  filename:'bundle.js',
  path: path.join(dirname,'dist')
  },
  module: {
    rules: [
    {
    test: /.vue$/,
    loader:'vue-loader'
    },
    {
    test: /.css$/,
    use: [
    'style-loader',
    'css.loader'
    ]
    },
    {
    test: /.(gif|jpg|jpeg| png|svg)$/,
    use: [
     {
     loader:'url-loader',
     options: {
     limit:1024,
     name: '[name]-xxx.[ext]'
     }
     }
     ]
    }
    ]
  },
  plugins: [
  new webpack.DedinePlugin({
    'process.env': {
        NODEENV: isDev ? '"development":"production"'
    }
  }),
  new HTMLplugin()
  ]
}
if(isDev) {
// 用来在页面进行js调试
 config.devtool = '#cheap=module-eval-source-map',
  config.devServer = {
    port: 8000,
    host:'0.0.0.0',
    // 把错误显示在网页上
    overlay: {
        errors: true,
    },
    open: true,
    // 热更新，只改变当前组件的变化，防止其他的信息不见了
    hot: true,
    config.plugins.push(
        new webpack.HotMoudleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ),
    //做路由配置
    historyFallback: {
    }

} } module.exports = config

url-loader 是依赖file-loader 是对file-loader的封装，先读取文件的大小，然后判断大小，把小一点的图片打包在css里面，减少请求的次数。 7.在package.json里面添加脚本，build："webpack --config webpack.config.js".之所以在里面添加，是因为外面调用webpack是全局的，而项目里面的版本和外面的可能不一样。 8. 配置webpack-server ，在package.json 文件里面，先安装cross-env 用来告诉webpack是生产环境还是开发环境，不直接写的原因是不同操作系统的写的方式不一样，如果直接写在里面，要写两个。修改package.json 文件，build： "cross=env" NODE ENV = production webpack --config webpack.config.js' . dev: cross=env" NODE ENV = development webpack-dev-server --config webpack.config.js' 9. 安装html-webpack-plugins .

webpack 4.12 新的不同点。

1.webpack 和webpack-cli分离开了，所以全局安装完webpack 还需要安装webpack-cli。执行webpack a.js b.js 是把a打包成b，但是会报错。CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。

除了webpack自身外，请额外全局安装webpack-cli来使用CLI。执行npm uninstall webpack-cli npm install -g webpack-cli

2配置开发还是生产模式

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

提示我们没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：webpack --mode development. 重新执行，你的项目已经可以成功打包一半了

3.入口文件位置发生变化

但是会报错如下

Module not found: Error: Can't resolve 'hello.bundle.js' in '/xdev/webpack/newwebpack'

意思就是没有找到入口模块。 也就是说webpack4以上重新调整了打包模块的入口文件位置。这里我是看到别人写的说是调整到src下面了，然后把你的hello.js移动到src下面，并且改成index.js。

4. 打包方式发生变化

再次执行。 webpack index.js bundle.js 会提示can.t resolve相关的错误。 原因是，webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。 通过配置也可以更改打包文件名，在没有配置的情况下，会直接生成mian.js 因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行 webpack --mode development 或者 webpack --mode production。 这样便能够实现将'./src/index.js'打包成'./dist/main.js'。

5.将打包指令加入package.json

不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员： "dev":"webpack --mode development", "build":"webpack --mode production" 以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。 我们在根目录执行： npm run dev 可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。

6. 配置webpack 其他打包参数

在package.json 里面script里加入 webpack --mode development --watch --progress --display-modules --colors --colors 打包这个模块的原因--display-reasons 这的意思是，watch监听文件变化，可以自动打包，progerss可以看到打包的进度 display-modules 打包的模块 打包的文字是彩色的 还有打包的原因。

7. 使用require 引入css文件的时候，需要手动指定用哪些loader进行处理，否则还是会报如下的错误

ERROR in ./src/assets/css/hello.less 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type.

意思就是没有找到合适的loader进行css文件的处理,进行修改如下。 require('css-loader!./assets/css/hello.less')执行npm run dev 显示成功。打开页面，但是页面css并没有生效，想要文件生效，还需要用到style-loader less-loader 这里有个坑哇，一定要注意顺序。如下：require('style-loader!css-loader!less-loader!./assets/css/hello.less')。重新执行，页面运行正常了。

8.再多页面应用中，可以定义多个入口。

enter:{
main: '',
page:''
},
output: {
path:'',
filename:'[name]-[hash].js'
}

9.解决手动解决文件引入的问题

安装: cnpm i html-webpack-plugins -save-dev ,我安装的时候，一直报语法错误，找了好久，后来终于发现，是package.json 多了一个，哈哈哈，想抽自己几下。安装后进行配置： plugins: [ new HtmlWebpackPlugin({template: 'index.html'}) ]，然后重新执行，就会把index.html 复制一份，到dist目录下，自动引入打包后的文件。 在配置了index为模块后，就出现了另一个问题，那就是直接拷贝了模版的链接，但是显然两个文件的是不一样的。所以这里需要去掉，根目录下index里的引入文件。publicPath:'http://cdn.com',主要用于设置上线地址。以这个绝对路径为开头。

10.配置多个页面html

复制 new HtmlWebpackPlugin（{chunks[a]用于指定当前文件，excludeChunks[a,b]排除法}）

11.减少http请求，使性能达到极致。在github上，HtmlWebpackPlugin ，官方为了解决问题的demo： script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()

<%= compilation.assets[HtmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%> 这样写会报错，解决办法还没找到，初步觉得是模版解析的问题。

11.postcss-loader

这个官网给了几种配置，在webpack里使用要单独写一个配置文件，还有哇，module.exports = { // parser: 'sugarss', plugins: { 'postcss-import': {}, 'postcss-cssnext': {}, 'cssnano': {} } }，这个sugarss，居然是个.sss为后缀名的css解析，不能用{},一直报错这个Unnecessary curly bracket，显示是语法错误。

没有解决的问题： 1.自动读取外链文件引入 2.image-webpack-loader 无法添加到指定文件夹 3。热更新。

总结： 1、webpack-cli必须要全局安装，否则不能使用webpack指令； 2、webpack也必须要全局安装，否则也不能使用webpack指令。 3、webpack4.x中webpack.config.js这样的配置文件不是必须的。 4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。