学习笔记webpack

额工作了三年都没写过博客。

现在开始养成习惯吧。

拉下的技术是时候学回来了，看了一天的webpack入门。

项目使用webpack步骤：

1、项目文件初始目录

根目录--/app/--main.js   //入口文件

                  --...js      

          --/public/--index.html 

                        --...html

2、运行命令

npm install --save-dev webpack//安装到你的项目目录

npm init

npm install --save-dev webpack// 安装Webpack

npm instal--save-dev webpack-dev-server//安装Webpack-dev-server构建本地服务器

3、根目录下新建一个名为webpack.config.js的文件

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

4、在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

......  
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }
......

在终端中输入npm run server即可在本地的8080端口查看结果

5、loader和bable还有CSS预处理器
用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包

// npm一次性安装多个依赖模块，模块之间用空格隔开、（react还没学。。。，就不装了）
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

webpack.config.js 更新

......    
module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "env", 
                        // "react"
                    ]
                }
            },
            exclude: /node_modules/
        }]
    }
......

css(一切皆模块)

npm install --save-dev style-loader css-loader

npm install --save-dev postcss-loader autoprefixer

webpack.config.json更新为

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



接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加如下代码之后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
最后完结。参考文章，感谢作者，指点迷津