webpack 和一些模块安装

parcel一些方面比webpack好很多，配置不复杂，但目前还不成熟暂时不使用 头铁的可以试试

webpack3.1.0
node 6.8.1
node版本过高会有path错误

npm init
npm install --save-dev webpack  //npm install [email protected] 

编辑webpack.config.js
package.json加上

"scripts": {
"build": "webpack"
}

babel-loader的安装 https://github.com/babel/babel-loader
不同版本安装方法不一样
webpack 3.x | babel-loader 8.x | babel 7.x 新

npm install [email protected] @babel/core @babel/preset-env webpack
//package.json加上
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

webpack 3.x babel-loader 7.x | babel 6.x 旧

npm install babel-loader babel-core babel-preset-env webpack
//package.json加上
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

sass-loader的安装
https://github.com/webpack-contrib/sass-loader

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

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

autoprefixer-loader推荐使用postcss-loader
https://github.com/postcss/postcss-loader

postcss.config.js

module.exports = {
//与上面一起使用时下面几行不需要
 // parser: 'sugarss',
  plugins: {
   // 'postcss-import': {},
    'postcss-cssnext': {},
   // 'cssnano': {}
  }
}

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

在css-loader style-loader后，sass|less|stylus-loader前
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

module-1

function fn(){
    console.log(1)
}
export default fn

module-2

function fn(){
    console.log(2)
}
export default fn

main.css

module-3

import x from './module1'
import y from './module2'
x() //1
y() //2

三个js和一个css会被webpack打包成一个js文件