webpack3整理（第一节/满三节）

Posted 2020-10-24 鱼樱、、

一、css文件打包到js中（loader的三种写法）

//第一种写法：直接用use。
module: {
    rules: [{
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
    }]
}
//第二种写法：把use换成loader。
module: {
    rules: [{
        test: /\.css$/,
        loader: [‘style-loader‘, ‘css-loader‘]
    }]
}
//第三种写法：用use+loader的写法：
module: {
    rules: [{
        test: /\.css$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }]
    }]
}

二、压缩JS代码（虽然uglifyjs是插件，但是webpack版本里默认集成，不需要再次安装。）

const path=require(‘path‘);
const uglify = require(‘uglifyjs-webpack-plugin‘);
module.exports={
    entry:{
        entry:‘./src/main.js‘, //入口文件的配置
    },
    output:{  //出口文件的配置项
        path:path.resolve(__dirname,‘dist‘),  //输出的路径
        filename:‘[name].js‘  //输出的文件名称([name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件)
    },
    module:{   //插件，用于生产模版和各项功能
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins:[
        new uglify()
    ],
    devServer:{
       contentBase:path.resolve(__dirname,‘dist‘), //设置基本目录结构
       host:‘192.168.0.144‘,   //服务器的IP地址，可以使用IP也可以使用localhost （建议使用本机IP）
       compress:true, //服务端压缩是否开启
       port:3000  //配置服务端口号（不建议8080容易被占用）
    }
}

注明：要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载安装。下载好后，需要配置一下devServer。
（需要在package.json下面配置如下）

　　"scripts": {
　　　　"server":"webpack-dev-server"
　　　}

 配置好保存后，在终端里输入 npm  run  server  打开服务器即可看到页面结果。（对应文件在webpack.prod.conf.js也有插件的基本配置）

css自动加入前缀的插件配置：（根目录下面的psotcss.js进行如下配置）：

module.exports = {
    plugins: [
        require(‘autoprefixer‘)
    ]
}

这一个简单postCSS的配置，引入了autoprefixer插件。让postCSS拥有添加前缀的能力，它会根据 can i use 来增加相应的css3属性前缀。然后配置loader

{
　　test: /\.css$/,
　　use: [{
　　　　loader: "style-loader"
　　}, {
　　　　loader: "css-loader",
　　options: {
　　　　modules: true
　　}
　　}, {
　　loader: "postcss-loader"
　　}]
}