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

//第一种写法：直接用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" ???????}] ???}]}

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也有插件的基本配置）

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