webpack初使用

前端工程化

在网页比较简单的时代，以文件可以包含 HTML、CSS、JS；到后来结构、样式、行为的分离，文件开始多起来，慢慢的出现了AMD，CMD ，CommonJS，ES6 Module等，技术变化日新月异，把这些技术统一整合起来，就是工程化。
引用网上一作者的话：

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。

node-sass

github地址：node-sass

首先安装node-sass

npm install node-sass

运行命令行，就能将scss文件变成css文件

npx node-sass src/css/style.scss dist/css/style.css

当我scss文件变动，自动更新为css文件

npx node-sass src/css/style.scss -w dist/css/style.css

生成map文件

npx node-sass src/css/style.scss -w dist/css/style.css --source-map true

在这里遇到最大的问题是没有弄清楚全局安装和局部安装，陷入了好久
npm install -g node-sass是全局安装，可以直接使用node-sass
npm install node-sass是局部安装，使用时需要加上相对路径./node_modules/.bin/node-sass；或者使用npx node-sass，npx可以快速找到相对路径。

提示no such file or directory, open '/Users/mac/package.json'，是因为缺少package.json这个文件。

npm WARN saveError ENOENT: no such file or directory, open
'C:\Users\fanzm1\workspace\Astone\0115_NodeJS\package.json'

//首先，初始化项目，一路回车就行
npm init -f

//接着安装依赖
npm install formidable --save

babel

官方网址：babel

首先安装babel

npm install --save-dev babel-cli babel-preset-env

创建一个.babelrc文件，写上

{ "presets": ["env"] }

在创建一个package.json文件，方法：npm init一路回车
打开package.json，添加上内容

{
    "devDependencies": {
          "babel-cli": "^6.0.0"
      }
}

运行下面这句就可以将js文件进行翻译

./node_modules/.bin/babel src/js -d dist/js

当我src/js文件有变动，自动更新为dist/js文件

./node_modules/.bin/babel src/js -d dist/js -wtach

watch-cli

今天其他文件，比如image，html等不需要翻译的文件
地址：watch-cli

安装watch-cli

npm i -g watch-cli

使用，只要文件改动动就会拷贝到dist目录里

watch -p "src/images/**/*" -c "cp -r src/images dist/images"
watch -p "src/index.html" -c "cp src/index.html dist/index.html"

每一种文件都有一个工具，造成每一种文件都需要开一个窗口，导致很乱，这时webpack出现了，把这些整合在一起

webpack

webpack官网：webpack

首先npm init，初始化出一个package.json
安装webpack

npm install --save-dev webpack

运行npx webpack会让你安装package-cli

创建并编辑文件webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
   entry: './src/js/app.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

app.js引用其他文件

import module1 from './module-1'
import module2 from './module-2'

module1()
module2()

被引用的文件

function fn(){
    alert(1)
}
export default fn
/************/
function fn(){
    console.log(2)
}
export default fn

现在可以把 JS 文件拷贝过去，还不能实现翻译

babel webpack

官网：babel-loader

安装

npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack

配置webpack.config.json文件的rules部分

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    }

node-sass webpack

官网：sass-loader
安装

npm install sass-loader node-sass webpack --save-dev

编辑配置webpack.config.json文件的rules部分

{
    test: /\.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader",
        options: {
            includePaths: ["absolute/path/a", "absolute/path/b"]
        }
    }]
}

如果报错提示什么安装什么npm install ...。

autoprefixer

github地址：PostCSS Loader
处理 CSS 兼容问题，在属性面前自动加前缀。

安装

npm i -D postcss-loader

编辑文件postcss.config.js

module.exports = {
  //parser: 'sugarss',        //可以不要
  plugins: {
    //'postcss-import': {},        //可以不要
    //'postcss-preset-env': {},        //可以不要
      'postcss-cssnext': {}
    //'cssnano': {}        //可以不要
  }
}

编辑文件webpack.config.json文件的rules部分

use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 1 } },  //重点这句
    { loader: 'postcss-loader'},    //重点这句
    'sass-loader'
]

如果报错提示什么安装什么npm install ...。