webpack

一》Cannot use import statement outside a module 解决方法
错误原因:import $ from ‘jquery’;导入文件模块是es6模块化语法，而浏览器并不支持es6语法

解决方法：在项目中配置webpack即可

步骤：

1、运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包 (需要管理员身份)

2、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

3、 在 webpack 的配置文件中，初始化如下基本配置：

module.exports = { mode: ‘development’ // mode 用来指定构建模式 }
"
4、在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

“scripts”: { “dev”: “webpack” // script 节点下的脚本，可以通过 npm run 执行 }
5、 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

6、将原来引入的js文件改为dist目录下的main.js文件

二》配置打包的入口和出口

三》自动打包
能让在没打包前的文件修改内容直接生效，而不用每次修改后都手动打包
1、安装自动打包工具，在终端运行npm i webpack-dev-server -D

2、在 package.json 配置文件中的 scripts 节点下，将 dev 脚本修改如下：

“scripts”: { “dev”: “webpack-dev-server” // script 节点下的脚本，可以通过 npm run 执行 }
【“scripts”: { “dev”: “webpack-dev-server --open --host 127.0.0.1 --port 80” // script 节点下的脚本，可以通过 npm run 执行，打包完成后自动打开页面 --open：打包完成后自动打开页面 ，–host：配置IP地址，–port：配置端口}】

3、在终端运行npm run dev，
webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server打包生成的输出文件，默认放到跟目录下，这个文件是存在内存中，并不是存储在磁盘中，所以在根目录中看不见；

4、将原来引入的js文件改为根路径下的相应文件

//将此行引入修改为下面代码

四》通过loader打包非js模块
实际开发中，webpack默认只能打包处理以.js后缀名结尾的模块，其他后缀名的模块需要调用loader加载器才可以正常打包，否则会报错！
loader加载器可以协助webpack打包处理特定的文件模块：
less-loader可以打包处理.less相关的文件
sass-loader可以打包处理.scss相关的文件
url-loader可以打包处理css中于url路径相关的文件

1）打包处理css文件

2）打包处理less文件

3）打包处理scss文件

4）配置打包处理样式文件中的图片和文字文件加载器

5）配置打包处理.vue加载器

五》配置postCSS自动添加CSS兼容性前缀

六》打包处理js文件中的高级语法

七》webpack打包发布