webpack3整理（第一節/滿三節）

1、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"
        }]
    }]
}

2、壓縮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"
　　}]
}