webpack：从入门到真实项目配置
css自动加前缀工具
parcel
关于 webpack 的面试题有哪些？
安装：npm install node-sass -g 出错搜索出错问题
编译：scss XXX.sass XXX.css
自动编译：node-sass sa.scss sa.css -w sa.scss
目录：
1.src未翻译的代码
2.dist待发布的代码
3.wendors第三方代码
npm install http-server 安装server局部 -g全局安装在一个文件内
mkdir webpack-demo && cd webpack-demo
npm init -y //生成package.json
npm install --save-dev webpack@3 //@后边可加版本号npx webpack //运行webpack
创建webpack.config.js
创建./src/index.js
~~~
const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist')}
};
~~~
编辑webpack.config.js
module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['env']}}}]
}
//再次运行webpack,会报错，需要下载依赖,根据提示下载
npm install babel-loader
npm install '@babel/core'
npm install babel-preset-env安装完成后，运行npx webpack 不报错。
模块化
src/js（index.html（引入js/app.js））/新建.js文件、app.js、dist/index.html.js
function fn(){console.log('b');
}
export default fn修改：app.js
import a from './a'
import b from './b'修改webpack配置
module.exports = {++++entry: './src/js/app.js',++++output: {filename: 'main.js',++++path: path.resolve(__dirname, 'dist/js')++++},module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['env']}}}]}
};
运行npx webpack安装sass-loader
npm install sass-loader node-sass webpack --save-dev安装npm install style-loader
安装npm install css-loader//完整版配置文件
const path = require('path');module.exports = {entry: './src/js/app.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist/js')},module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['env']}}},{test: /\.scss$/,use: ["style-loader", // creates style nodes from JS strings"css-loader", // translates CSS into CommonJS"sass-loader" // compiles Sass to CSS, using Node Sass by default]}]}
};
安装 Parcel ：
obal add parcel-bundler
npm:
npm install -g parcel-bundler
在你正在使用的项目目录下创建一个 package.json 文件：
npm init -y
Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。
接下来，创建一个 index.html 和 index.js 文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>parcel</title>
</head>
<body><h1>parcel learning</h1><script src="./index.js"></script>
</body>
</html>执行 parcel index.html 文件就开始打包了，打包后的文件存在于dist文件夹，并且支持热加载（HMR）
当然，也可以自定义端口号 parcel index.html -p 80