webpack学习02 项目中常用的包

1、css编译使用的包

css-loader //加载.css文件
style-loader //使用style标签将css-loader内部样式注入到我们的HTML页面

2、html编译使用的包

html-loader //加载html文件
{
        loader:’html-loader’, //加载.html文件
       options:{
              attrs:[“img:src”]
        }
}
extract-loader //将此文件和bundle.js区分开来
file-loader //起名字使用

3、img加载使用的包

        首先需要在html-loader中声明

file-loader 将图片放置在某个文件夹中 并起名字
或者url-loader
{
    loader:’url-loader’, //可以直接生成base64图片（小于limit）
     options:{
     limit:1024,
     name:’[name]-[hash:8].[ext]’
     }
}

4、js加载使用的包
babel-preset-env

5、cross-env
在package.json文件设置变量：

“scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1”,
     “build”: “cross-env NODE_ENV=production webpack –config webpack.config.js”,
    “dev”: “cross-env NODE_ENV=development webpack-dev-server –config webpack.config.js”
},

在webpack.config.js获取

const isDev=process.env.NODE_ENV === “development”

变量设置为所有js都可以访问：

new webpack.DefinePlugin({
     “process.env”:{
            NODE_ENV:isDev?‘“development”’:‘“production”’
     }
}),

6、生成html插件

html-webpack-plugin 引入此插件将自动生成一个html页面 将打包好的bundle.js引入

7、打开.vue页面还需要配置：

VueLoaderPlugin() 插件 代码： const { VueLoaderPlugin } = require(‘vue-loader’)

8、webpack-dev-server基本配置

config.devtool =”#cheap-module-eval-source-map” //调试
config.devServer ={
    port:’8888’,
     host:”0.0.0.0”,
    overlay:{
          errors:true
     },
    open:true, //直接打开页面
    // historyFallback:{ //没设置的页面定义到哪里
     // },
     hot:true //改变页面只加载本模块内容
}
config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
)